import React, { useState } from 'react';
import './FlowerSea.scss';
import FlowerSea1 from '../../assets/images/FlowerSea/1.jpg';
import FlowerSea2 from '../../assets/images/FlowerSea/2.jpg';
import FlowerSea3 from '../../assets/images/FlowerSea/3.jpg';
import FlowerSea4 from '../../assets/images/FlowerSea/4.jpg';
import FlowerSea5 from '../../assets/images/FlowerSea/5.jpg';
import FlowerSea6 from '../../assets/images/FlowerSea/6.jpg';
import FlowerSea7 from '../../assets/images/FlowerSea/7.jpg';
import FlowerSea8 from '../../assets/images/FlowerSea/8.jpg';
import FlowerSea9 from '../../assets/images/FlowerSea/9.jpg';
function FlowerSea() {
  const [offset, setOffset] = useState(0);

  const handleNext = () => {
    if (offset > -600) {
      setOffset(offset - 600);
    }
  };

  const handlePrev = () => {
    if (offset < 0) {
      setOffset(offset + 600);
    }
  };

  return (
    <div className='FlowerSea'>
        <div className='FlowerSeaFlowerSea'>花海</div>
        <div className='rightALL'>查看全部</div>
        <div className='div111'></div>
        <div
          className={`arrow left ${offset === 0 ? 'hidden' : ''}`}
          onClick={handlePrev}
        >
          &lt;
        </div>
        <div
          className={`arrow right ${offset <= -600 ? 'hidden' : ''}`}
          onClick={handleNext}
        >
          &gt;
        </div>
        <ul className='FlowerSeaul' style={{ transform: `translateX(${offset}px)` }}>
          <li><img src={FlowerSea1} alt="" /></li>
          <li><img src={FlowerSea2} alt="" /></li>
          <li><img src={FlowerSea3} alt="" /></li>
          <li><img src={FlowerSea4} alt="" /></li>
          <li><img src={FlowerSea5} alt="" /></li>
          <li><img src={FlowerSea6} alt="" /></li>
          <li><img src={FlowerSea7} alt="" /></li>
          <li><img src={FlowerSea8} alt="" /></li>
          <li><img src={FlowerSea9} alt="" /></li>
        </ul>
    </div>
  );
}

export default FlowerSea;
